<template>
  <div class="app-container">
	  <el-row :gutter="32">
	    <el-col :xs="24" :sm="24" :lg="16">
	      <div class="chart-wrapper">
	        <bar-chart :chartData="gradeChart" v-if="gradeChart != null"/>
	      </div>
	    </el-col>
	    <el-col :xs="24" :sm="24" :lg="8">
	      <div class="chart-wrapper">
	        <pie-chart :chartData="sexChart" v-if="sexChart != null"/>
	      </div>
	    </el-col>
	  </el-row>
	  <el-row :gutter="32">
	    <el-col :xs="24" :sm="24" :lg="16">
	      <div class="chart-wrapper">
	        <bar-chart :chartData="specChart" v-if="specChart != null"/>
	      </div>
	    </el-col>
	    <el-col :xs="24" :sm="24" :lg="8">
	      <div class="chart-wrapper">
	        <pie-chart :chartData="lodgeChart" v-if="lodgeChart != null"/>
	      </div>
	    </el-col>
	  </el-row>
  </div>
</template>

<script>
import PieChart from '@/components/charts/PieChart.vue'
import BarChart from '@/components/charts/BarChart.vue'
import { getChartByCode} from "@/api/sys/chart";
import { exportDataset} from "@/api/sys/dataset";

export default {
  name: "StudentAliveChart",
  components: {PieChart, BarChart},
  data() {
    return {
		gradeChart:null,
		sexChart:null,
		specChart:null,
		lodgeChart:null
    };
  },
  created() {
    getChartByCode('student_grade').then(response => {
      if(!response.data){
        this.msgError("报表不存在");
      }else{
        this.gradeChart = response.data;
      }
    });
    getChartByCode('student_specialty').then(response => {
      if(!response.data){
        this.msgError("报表不存在");
      }else{
        this.specChart = response.data;
      }
    });
    getChartByCode('student_sex').then(response => {
      if(!response.data){
        this.msgError("报表不存在");
      }else{
        this.sexChart = response.data;
      }
    });
    getChartByCode('student_lodge').then(response => {
      if(!response.data){
        this.msgError("报表不存在");
      }else{
        this.lodgeChart = response.data;
      }
    });
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin: 0 auto;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
